<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				width: 500px;
				height: 300px;
				/* border: 1px solid; */
				margin: 0 auto;
				padding: 20px;
				border-radius: 10px;
			}
			table{
				width: 400px;
				height: 50px;
				background-color: skyblue;
				text-align: center;
				table-layout: fixed;
				table-layout: fixed;
			}
		</style>
	</head>
	<body>
		<div id="box">
			用户名：<input type="text" id="user" value="" /><br><br>
			密&emsp;码：<input type="password" id="password" value="" /><br><br>
			<input type="radio" name="sex" id="man" value="1" checked="checked"/><label for="man">男</label>
			<input type="radio" name="sex" id="woman" value="2"/><label for="woman">女</label><br><br>
			<button type="button" class="btn">提交</button><br><br>
		</div>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<td>用户名</td>
					<td>密码</td>
					<td>性别</td>
					<td>操作</td>		
				</tr>
			</thead>
			<tbody>
				<!-- <th>
				    <td>${arr[i].user}</td>
				    <td>${arr[i].password}</td>
					<td>getsexfn(${arr[i].sex})</td>
				    <td><button type="button" onclick="del({arr[i].id})">删除</button></td>
				</th> -->
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		/* 获取DOM */
		var user=document.querySelector('#user');
		var password=document.querySelector('#password');
		var btn=document.querySelector('.btn');
		var sexs=document.querySelectorAll("#box input[type='radio']")
		var tbody=document.querySelector('tbody');
		var search=document.querySelector(".search")
		/* 声明本地存储 */
		if (localStorage.ss) {
			var arr=JSON.parse(localStorage.ss);
			show(arr);
		} else{
			var arr=[];
			localStorage.ss=JSON.stringify(arr);
		}
		/* 点击事件 */
		btn.onclick=function(){
				var obj={
					user:user.value,
					password:password.value,
					sex:getsexV(),
					id:+new Date()
				}
				arr.push(obj);
				localStorage.ss=JSON.stringify(arr);
				show(arr);
			user.value=password.value=sexs.value='';
		}
		/* 获取单选值 */
		function getsexV(){
			/* 循环判断单选选中返回值 */
			for(i=0;i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value;
				}
			}
		}
		/* 单选渲染数据处理 */
		function getsexfn(value){
			return value=="1"?"男":"女"
		}
		
		function show(arr){
			tbody.innerHTML='';
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML+=`
				    <tr>
				        <td>${arr[i].user}</td>
				        <td>${arr[i].password}</td>
						<td>${getsexfn(arr[i].sex)}</td>
				        <td>
						    <button type="button" onclick="XG(${arr[i].id} ,this)">修改</button>
						    <button type="button" onclick="del(${arr[i].id})">删除</button>
						</td>
				    </tr>
				`;
			}
		}
		/* 删除数据 */
		function del(id){
			for(var i=0;i<arr.length;i++){
				if(arr[i].id==id){
					arr.splice(i,1);
					break;
				}
			}
			localStorage.ss=JSON.stringify(arr);
			show(arr);
		}
		/* 修改数据 */
		function XG(id,t){
			if(t.innerHTML == "修改"){
				t.innerHTML = "完成";
				for(var i=0;i<arr.length;i++){
					if(arr[i].id == id){
						user.value = arr[i].user;
						password.value = arr[i].password;
					}
				}
			}else{
				t.innerHTML="修改";
				for(var i=0;i<arr.length;i++){
					arr[i].user=user.value;
					arr[i].password=password.value;
				}
			}
		}
		
		
		
	</script>
</html>
